let addUserLayerIndex = null;

function initUserTable() {
    layui.table.render({
        elem: '#user-table',
        id: 'user-table',
        url: '/api/user', // 此处为静态模拟数据，实际使用时需换成真实接口
        page: true,
        limit: 5,
        limits: [2, 3, 4, 5, 6, 7, 8, 9, 10, 20, 50, 100],
        height: 'full-0',
        css: [ // 设置单元格样式
            // 取消默认的溢出隐藏，并设置适当高度
            '.layui-table-cell{height: 50px; line-height: 40px;}',
        ].join(''),
        cols: [[
            {field: 'id', fixed: 'left', width: 70, title: 'ID', sort: true},
            {field: 'username', fixed: 'left', title: '用户名', sort: true, edit: 'text'},
            {field: 'password', title: '密码', edit: 'text'},
            {field: 'role', title: '职责', width: 130, unresize: true, align: 'center', templet: '#user-table-role-template'},
            {field: 'createdAt', title: '创建时间', sort: true, templet: '{{= d.createdAt.replace("T", " ")}}'},
            {field: 'updatedAt', title: '更新时间', sort: true, templet: '{{= d.createdAt.replace("T", " ")}}'},
            {title: '操作', fixed: 'right', width: 70, templet: '#user-table-operator-template'}
            // {type: 'checkbox', fixed: 'left'},
            // // 未自定义模板的普通列
            // {field:'id', fixed: 'left', width:80, title: 'ID', sort: true},
            // // 模板 - 选择器写法
            // {field:'username', width:80, title: '用户', templet: '#ID-table-demo-templet-user'},
            // // 模板 - 函数写法
            // {field:'sex', width:60, title: '性别', templet: function(d){
            //         if(d.sex === '男'){
            //             return '<span style="color: blue">♂</span>';
            //         } else {
            //             return '<span style="color: pink">♀</span>';
            //         }
            //     }},
            // // 模板 - 普通字符写法
            // {field:'city', width:115, title: '城市', templet: '<div><i class="layui-icon layui-icon-location"></i> {{= d.city }}</div>'},
            // // 模板中可包含任意字段、任意内容（如表单等）
            // {title: '状态', width:85, templet: '#ID-table-demo-templet-switch'},
            // {title: '其他', minWidth:200, templet: '#ID-table-demo-templet-other'}
        ]],
        parseData: function (res) { // res 即为原始返回的数据
            return {
                "code": 0, // 解析接口状态
                "msg": "", // 解析提示文本
                "count": res.count, // 解析数据长度
                "data": res.users // 解析数据列表
            };
        },
        done: function(res, curr, count){
            var options = this;

            // 获取当前行数据 - 自定义方法
            layui.table.getRowData = function(tableId, elem){
                var index = layui.$(elem).closest('tr').data('index');
                return layui.table.cache[tableId][index] || {};
            };

            layui.table.on('tool(user)', function(obj){ // 双击 toolDouble
                var data = obj.data; // 获得当前行数据
                console.log(obj)
                if(obj.event === 'save'){
                    layui.layer.open({
                        title: '保存 - id:'+ data.id,
                        type: 1,
                        area: ['80%','80%'],
                        content: '<div style="padding: 16px;">自定义表单元素</div>'
                    });
                } else if(obj.event === 'delete'){
                    layui.layer.confirm(`真的删除用户 ${data.username}(ID:${data.id}) 么`, function(index){
                        layui.layer.close(index)
                        // 向服务端发送删除指令
                        deleteUser(obj);
                    });
                } else {
                    layui.layui.layer.msg("未知操作！");
                }
            });
            // 单元格编辑事件
            layui.table.on('edit(user)', function(obj){
                var field = obj.field; // 得到字段
                var value = obj.value; // 得到修改后的值
                var data = obj.data; // 得到所在行所有键值
                // 值的校验
                if(field === 'username') {
                    // 字符只能是英文+数字
                    if(!/^[a-zA-Z0-9]+$/.test(obj.value)) {
                        layui.layer.tips('输入的字符只能是英文+数字，请重新编辑', this, {tips: 1});
                        return obj.reedit(); // 重新编辑 -- v2.8.0 新增
                    }
                } else if(field === 'password') {
                    if(!/^[a-zA-Z0-9]+$/.test(obj.value)) {
                        layui.layer.tips('输入的字符只能是英文+数字，请重新编辑', this, {tips: 1});
                        return obj.reedit();
                    }
                }
                // 编辑后续操作，如提交更新请求，以完成真实的数据更新
                var user = {};
                user["id"] = data.id;
                user["username"] = data.username;
                user["password"] = data.password;
                user["role"] = data.role;
                user[field] = value;
                layui.layer.msg('编辑成功', {icon: 1});
                fetch(`/api/user`, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(user)
                })
                .then(response => {
                    if (!response.ok) {
                        parent.layui.layer.alert(`更新用户出错！<br />状态码：${response.status}`);
                    } else {
                        parent.layui.layer.msg('更新成功！');
                        // obj.update(user);
                    }
                })
                .catch(error => {
                    parent.layui.layer.msg('因网络原因，更新用户失败！');
                });

            });

            // dropdown 方式的下拉选择
            layui.dropdown.render({
                elem: '.dropdown-role',
                // trigger: 'hover',
                // 此处的 data 值，可根据 done 返回的 res 遍历来赋值
                data: [{
                    title: '提问者',
                    id: 'ASKER'
                },{
                    title: '回答者',
                    id: "RESPONDER"
                },{
                    title: '管理员',
                    id: "ADMIN"
                }],
                click: function(obj){
                    var data = layui.table.getRowData(options.id, this.elem); // 获取当前行数据(如 id 等字段，以作为数据修改的索引)

                    this.elem.find('span').html(obj.title);

                    let user = {};
                    user["id"] = data.id;
                    user["username"] = data.username;
                    user["password"] = data.password;
                    user["role"] = obj.id;

                    fetch(`/api/user`, {
                        method: 'PUT',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(user)
                    })
                    .then(response => {
                        if (!response.ok) {
                            parent.layui.layer.alert(`更新用户出错！<br />状态码：${response.status}`);

                        } else {
                            parent.layui.layer.msg('更新成功！');
                            // 更新数据中对应的字段
                            data.role = obj.id;
                        }
                    })
                    .catch(error => {
                        parent.layui.layer.msg('因网络原因，更新用户失败！');
                        console.error('Error:', error);
                    });

                }
            });
        }
    });
}

function deleteUser(obj) {
    let user = obj.data;
    let userId = user.id;

    fetch(`/api/user/${userId}`, {
        method: 'DELETE',
        headers: {
            'Content-Type': 'application/json'
        }
    })
    .then(response => {
        if (!response.ok) {
            layui.layer.msg('删除用户出错！');

        } else {
            layui.layer.msg('删除用户成功！');
            obj.del(); // 删除对应行（tr）的DOM结构
        }
    })
    .catch(error => {
        console.error('Error:', error);
    });
}

function addUser() {
    addUserLayerIndex = layui.layer.open({
        type: 1,
        title: '添加用户',
        content: layui.$('#add-user-layer'),
        hideOnClose: true,
        area: ['24rem', '18rem'],
        closeBtn: 1,
        fixed: true, // 固定
        resize: false, // 不允许调整大小
        shadeClose: true,
        shade: [0.1, '#16baaa'], // 遮罩
        anim: "slideLeft" // 动画 从右边缘往左
    });
}

function initUserAdd() {
    layui.util.on('lay-on', {
        'user-add': addUser,
        'close-user-add': () => {
            layui.layer.close(addUserLayerIndex , ()=>{});
        }
    });
    // 自定义规则
    layui.form.verify({
        // 自定义提示方式
        cookiestr: function(value, elem) {
            if (!value) return "必填项"; // 若值未填写，不进行后续规则验证
            // 必为 英文字符+数字 的正则表达式
            if(!/^[a-zA-Z0-9]+$/.test(value)){
                return '只能为英文字母和数字';
            }
        }
    });
    layui.form.on('submit(add-user)', function (data) {
        let field = data.field; // 获取表单全部字段值
        let elemForm = data.form; // 获取当前表单域的 form 元素对象，若容器为 form 标签才会返回。
        // 显示填写结果，仅作演示用
        layer.alert(JSON.stringify(field), {
            title: '当前填写的字段值'
        });
        fetch('/api/user', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(field)
        })
            .then(response => {
                if (!response.ok) {
                    parent.layer.msg('添加用户失败！');
                } else {
                    parent.layer.msg('添加用户成功！');
                    // 重载表格数据
                    layui.table.reloadData('user-table', {
                        where: {}, // 数据异步请求时携带的字段集 --- 属性设置有效，因属于数据相关属性
                        scrollPos: true, // 设定重载数据或切换分页时的滚动条的位置状态 --- 属性设置有效
                    });
                    // 重置 form
                    elemForm.reset();
                    // 关闭弹窗
                    layui.layer.close(addUserLayerIndex , ()=>{});
                }
            })
            .catch(error => {
                parent.layer.msg('因网络原因，添加用户失败！');
                console.error('Error:', error);
            });
        return false; // 阻止默认 form 跳转
    });
}

document.addEventListener('DOMContentLoaded', () => {
    layui.use(async function () {
        initUserTable();
        initUserAdd();
    });
});